<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--================================================================================
  Item Name: Materialize - Material Design Admin Template
  Version: 4.0
  Author: PIXINVENT
  Author URL: https://themeforest.net/user/pixinvent/portfolio
================================================================================ -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="description"
          content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. ">
    <meta name="keywords"
          content="materialize, admin template, dashboard template, flat admin template, responsive admin template,">
    <title>Materialize - Material Design Admin Template</title>
    <!-- Favicons-->
    <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
    <!-- Favicons-->
    <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
    <!-- For iPhone -->
    <meta name="msapplication-TileColor" content="#00bcd4">
    <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
    <!-- For Windows Phone -->
    <!-- CORE CSS-->
    <link href="css//materialize.css" type="text/css" rel="stylesheet">
    <link href="css//style.css" type="text/css" rel="stylesheet">
    <!-- Custome CSS-->
    <link href="css/custom/custom.css" type="text/css" rel="stylesheet">
    <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
    <link href="vendors/perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet">
    <link href="vendors/flag-icon/css/flag-icon.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- Start Page Loading -->
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>
<!-- End Page Loading -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START HEADER -->
<header id="header" class="page-topbar">
    <!-- start header nav-->
    <div class="navbar-fixed">
        <nav class="navbar-color gradient-45deg-light-blue-cyan">
            <div class="nav-wrapper">
                <ul class="left">
                    <li>
                        <h1 class="logo-wrapper">
                            <a href="index.html" class="brand-logo darken-1">
                                <img src="images/logo/materialize-logo.png" alt="materialize logo">
                                <span class="logo-text hide-on-med-and-down">Materialize</span>
                            </a>
                        </h1>
                    </li>
                </ul>
                <div class="header-search-wrapper hide-on-med-and-down">
                    <i class="material-icons">search</i>
                    <input type="text" name="Search" class="header-search-input z-depth-2"
                           placeholder="Explore Materialize"/>
                </div>
                <ul class="right hide-on-med-and-down">
                    <li>
                        <a href="javascript:void(0);" class="waves-effect waves-block waves-light translation-button"
                           data-activates="translation-dropdown">
                            <span class="flag-icon flag-icon-gb"></span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="waves-effect waves-block waves-light toggle-fullscreen">
                            <i class="material-icons">settings_overscan</i>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="waves-effect waves-block waves-light notification-button"
                           data-activates="notifications-dropdown">
                            <i class="material-icons">notifications_none
                                <small class="notification-badge pink accent-2">5</small>
                            </i>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="waves-effect waves-block waves-light profile-button"
                           data-activates="profile-dropdown">
                  <span class="avatar-status avatar-online">
                    <img src="images/avatar/avatar-7.png" alt="avatar">
                    <i></i>
                  </span>
                        </a>
                    </li>
                    <li>
                        <a href="#" data-activates="chat-out"
                           class="waves-effect waves-block waves-light chat-collapse">
                            <i class="material-icons">format_indent_increase</i>
                        </a>
                    </li>
                </ul>
                <!-- translation-button -->
                <ul id="translation-dropdown" class="dropdown-content">
                    <li>
                        <a href="#!" class="grey-text text-darken-1">
                            <i class="flag-icon flag-icon-gb"></i> English</a>
                    </li>
                    <li>
                        <a href="#!" class="grey-text text-darken-1">
                            <i class="flag-icon flag-icon-fr"></i> French</a>
                    </li>
                    <li>
                        <a href="#!" class="grey-text text-darken-1">
                            <i class="flag-icon flag-icon-cn"></i> Chinese</a>
                    </li>
                    <li>
                        <a href="#!" class="grey-text text-darken-1">
                            <i class="flag-icon flag-icon-de"></i> German</a>
                    </li>
                </ul>
                <!-- notifications-dropdown -->
                <ul id="notifications-dropdown" class="dropdown-content">
                    <li>
                        <h6>NOTIFICATIONS
                            <span class="new badge">5</span>
                        </h6>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#!" class="grey-text text-darken-2">
                            <span class="material-icons icon-bg-circle cyan small">add_shopping_cart</span> A new order
                            has been placed!</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">2 hours ago</time>
                    </li>
                    <li>
                        <a href="#!" class="grey-text text-darken-2">
                            <span class="material-icons icon-bg-circle red small">stars</span> Completed the task</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">3 days ago</time>
                    </li>
                    <li>
                        <a href="#!" class="grey-text text-darken-2">
                            <span class="material-icons icon-bg-circle teal small">settings</span> Settings updated</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">4 days ago</time>
                    </li>
                    <li>
                        <a href="#!" class="grey-text text-darken-2">
                            <span class="material-icons icon-bg-circle deep-orange small">today</span> Director meeting
                            started</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">6 days ago</time>
                    </li>
                    <li>
                        <a href="#!" class="grey-text text-darken-2">
                            <span class="material-icons icon-bg-circle amber small">trending_up</span> Generate monthly
                            report</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">1 week ago</time>
                    </li>
                </ul>
                <!-- profile-dropdown -->
                <ul id="profile-dropdown" class="dropdown-content">
                    <li>
                        <a href="#" class="grey-text text-darken-1">
                            <i class="material-icons">face</i> Profile</a>
                    </li>
                    <li>
                        <a href="#" class="grey-text text-darken-1">
                            <i class="material-icons">settings</i> Settings</a>
                    </li>
                    <li>
                        <a href="#" class="grey-text text-darken-1">
                            <i class="material-icons">live_help</i> Help</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#" class="grey-text text-darken-1">
                            <i class="material-icons">lock_outline</i> Lock</a>
                    </li>
                    <li>
                        <a href="#" class="grey-text text-darken-1">
                            <i class="material-icons">keyboard_tab</i> Logout</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- end header nav-->
</header>
<!-- END HEADER -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START MAIN -->
<div id="main">
    <!-- START WRAPPER -->
    <div class="wrapper">
        <!-- START LEFT SIDEBAR NAV-->
        <aside id="left-sidebar-nav">
            <ul id="slide-out" class="side-nav fixed leftside-navigation">
                <li class="user-details cyan darken-2">
                    <div class="row">
                        <div class="col col s4 m4 l4">
                            <img src="images/avatar/avatar-10.png" alt=""
                                 class="circle responsive-img valign profile-image cyan">
                        </div>
                        <div class="col col s8 m8 l8">
                            <ul id="profile-dropdown-nav" class="dropdown-content">
                                <li>
                                    <a href="#" class="grey-text text-darken-1">
                                        <i class="material-icons">face</i> Profile</a>
                                </li>
                                <li>
                                    <a href="#" class="grey-text text-darken-1">
                                        <i class="material-icons">settings</i> Settings</a>
                                </li>
                                <li>
                                    <a href="#" class="grey-text text-darken-1">
                                        <i class="material-icons">live_help</i> Help</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#" class="grey-text text-darken-1">
                                        <i class="material-icons">lock_outline</i> Lock</a>
                                </li>
                                <li>
                                    <a href="#" class="grey-text text-darken-1">
                                        <i class="material-icons">keyboard_tab</i> Logout</a>
                                </li>
                            </ul>
                            <a class="btn-flat dropdown-button waves-effect waves-light white-text profile-btn" href="#"
                               data-activates="profile-dropdown-nav">John Doe<i
                                    class="mdi-navigation-arrow-drop-down right"></i></a>
                            <p class="user-roal">Administrator</p>
                        </div>
                    </div>
                </li>
                <li class="no-padding">
                    <ul class="collapsible" data-collapsible="accordion">
                        <li class="bold">
                            <a href="#" class="waves-effect waves-cyan">
                                <i class="material-icons">pie_chart_outlined</i>
                                <span class="nav-text">首页</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="/mall" class="waves-effect waves-cyan">
                                <i class="material-icons">local_mall</i>
                                <span class="nav-text">商场</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="/industries" class="waves-effect waves-cyan">
                                <i class="material-icons">business</i>
                                <span class="nav-text">业态</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="/planeMaps" class="waves-effect waves-cyan">
                                <i class="material-icons">map</i>
                                <span class="nav-text">楼层</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="/shops" class="waves-effect waves-cyan">
                                <i class="material-icons">shop</i>
                                <span class="nav-text">商户</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="/levels" class="waves-effect waves-cyan">
                                <i class="material-icons">assignment</i>
                                <span class="nav-text">会员等级</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="#" class="waves-effect waves-cyan">
                                <i class="material-icons">group</i>
                                <span class="nav-text">会员信息管理</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="/simpleRules" class="waves-effect waves-cyan">
                                <i class="material-icons">hdr_strong</i>
                                <span class="nav-text">普通积分规则</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="/promotionRules" class="waves-effect waves-cyan">
                                <i class="material-icons">hdr_weak</i>
                                <span class="nav-text">促销积分规则</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="/tickets" class="waves-effect waves-cyan">
                                <i class="material-icons">image_aspect_ratio</i>
                                <span class="nav-text">小票管理</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="/pointsDetail" class="waves-effect waves-cyan">
                                <i class="material-icons">view_quilt</i>
                                <span class="nav-text">积分明细</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="/receiveCoupons" class="waves-effect waves-cyan">
                                <i class="material-icons">card_membership</i>
                                <span class="nav-text">优惠券管理</span>
                            </a>
                        </li>
                        <li class="bold">
                            <a href="/activities" class="waves-effect waves-cyan">
                                <i class="material-icons">card_giftcard</i>
                                <span class="nav-text">活动</span>
                            </a>
                        </li>
                        <!--<li class="bold">-->
                        <!--<a href="css-color.html" class="waves-effect waves-cyan">-->
                        <!--<i class="material-icons">invert_colors</i>-->
                        <!--<span class="nav-text">Color</span>-->
                        <!--</a>-->
                        <!--</li>-->
                        <!--<li class="bold">-->
                        <!--<a href="table-basic.html" class="waves-effect waves-cyan">-->
                        <!--<i class="material-icons">border_all</i>-->
                        <!--<span class="nav-text">Table</span>-->
                        <!--</a>-->
                        <!--</li>-->
                        <!--<li class="bold">-->
                        <!--<a href="ui-icons.html" class="waves-effect waves-cyan">-->
                        <!--<i class="material-icons">lightbulb_outline</i>-->
                        <!--<span class="nav-text">Icons</span>-->
                        <!--</a>-->
                        <!--</li>-->
                        <!--<li>-->
                        <!--<a class="btn waves-effect waves-light gradient-45deg-red-pink" href="https://pixinvent.com/materialize-material-design-admin-template/landing/" target="_blank">-->
                        <!--<i class="material-icons white-text">file_upload</i>Upgrade to Pro!-->
                        <!--</a>-->
                        <!--</li>-->
                    </ul>
                </li>
            </ul>
            <a href="#" data-activates="slide-out"
               class="sidebar-collapse btn-floating btn-medium waves-effect waves-light hide-on-large-only">
                <i class="material-icons">menu</i>
            </a>
        </aside>
        <!-- END LEFT SIDEBAR NAV-->
        <!-- //////////////////////////////////////////////////////////////////////////// -->
        <!-- START CONTENT -->
        <section id="content">
            <!--start container-->
            <div class="container">
                <!--card stats start-->
                <div id="card-stats">
                    <div class="row mt-1">
                        <div class="col s12 m6 l3">
                            <div class="card gradient-45deg-light-blue-cyan gradient-shadow min-height-100 white-text">
                                <div class="padding-4">
                                    <div class="col s7 m7">
                                        <i class="material-icons background-round mt-5">add_shopping_cart</i>
                                        <p>Orders</p>
                                    </div>
                                    <div class="col s5 m5 right-align">
                                        <h5 class="mb-0">690</h5>
                                        <p class="no-margin">New</p>
                                        <p>6,00,00</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col s12 m6 l3">
                            <div class="card gradient-45deg-red-pink gradient-shadow min-height-100 white-text">
                                <div class="padding-4">
                                    <div class="col s7 m7">
                                        <i class="material-icons background-round mt-5">perm_identity</i>
                                        <p>Clients</p>
                                    </div>
                                    <div class="col s5 m5 right-align">
                                        <h5 class="mb-0">1885</h5>
                                        <p class="no-margin">New</p>
                                        <p>1,12,900</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col s12 m6 l3">
                            <div class="card gradient-45deg-amber-amber gradient-shadow min-height-100 white-text">
                                <div class="padding-4">
                                    <div class="col s7 m7">
                                        <i class="material-icons background-round mt-5">timeline</i>
                                        <p>Sales</p>
                                    </div>
                                    <div class="col s5 m5 right-align">
                                        <h5 class="mb-0">80%</h5>
                                        <p class="no-margin">Growth</p>
                                        <p>3,42,230</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col s12 m6 l3">
                            <div class="card gradient-45deg-green-teal gradient-shadow min-height-100 white-text">
                                <div class="padding-4">
                                    <div class="col s7 m7">
                                        <i class="material-icons background-round mt-5">attach_money</i>
                                        <p>Profit</p>
                                    </div>
                                    <div class="col s5 m5 right-align">
                                        <h5 class="mb-0">$890</h5>
                                        <p class="no-margin">Today</p>
                                        <p>$25,000</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--<div id="card-stats">-->
                <!--  <div class="row">-->
                <!--    <div class="col s12 m6 l3">-->
                <!--      <div class="card">-->
                <!--        <div class="card-content cyan white-text">-->
                <!--          <p class="card-stats-title">-->
                <!--            <i class="material-icons">person_outline</i> New Clients</p>-->
                <!--          <h4 class="card-stats-number">566</h4>-->
                <!--          <p class="card-stats-compare">-->
                <!--            <i class="material-icons">keyboard_arrow_up</i> 15%-->
                <!--            <span class="cyan text text-lighten-5">from yesterday</span>-->
                <!--          </p>-->
                <!--        </div>-->
                <!--      </div>-->
                <!--    </div>-->
                <!--    <div class="col s12 m6 l3">-->
                <!--      <div class="card">-->
                <!--        <div class="card-content red accent-2 white-text">-->
                <!--          <p class="card-stats-title">-->
                <!--            <i class="material-icons">attach_money</i>Total Sales</p>-->
                <!--          <h4 class="card-stats-number">$8990.63</h4>-->
                <!--          <p class="card-stats-compare">-->
                <!--            <i class="material-icons">keyboard_arrow_up</i> 70%-->
                <!--            <span class="red-text text-lighten-5">last month</span>-->
                <!--          </p>-->
                <!--        </div>-->
                <!--      </div>-->
                <!--    </div>-->
                <!--    <div class="col s12 m6 l3">-->
                <!--      <div class="card">-->
                <!--        <div class="card-content teal accent-4 white-text">-->
                <!--          <p class="card-stats-title">-->
                <!--            <i class="material-icons">trending_up</i> Today Profit</p>-->
                <!--          <h4 class="card-stats-number">$806.52</h4>-->
                <!--          <p class="card-stats-compare">-->
                <!--            <i class="material-icons">keyboard_arrow_up</i> 80%-->
                <!--            <span class="teal-text text-lighten-5">from yesterday</span>-->
                <!--          </p>-->
                <!--        </div>-->

                <!--      </div>-->
                <!--    </div>-->
                <!--    <div class="col s12 m6 l3">-->
                <!--      <div class="card">-->
                <!--        <div class="card-content deep-orange accent-2 white-text">-->
                <!--          <p class="card-stats-title">-->
                <!--            <i class="material-icons">content_copy</i> New Invoice</p>-->
                <!--          <h4 class="card-stats-number">1806</h4>-->
                <!--          <p class="card-stats-compare">-->
                <!--            <i class="material-icons">keyboard_arrow_down</i> 3%-->
                <!--            <span class="deep-orange-text text-lighten-5">from last month</span>-->
                <!--          </p>-->
                <!--        </div>-->
                <!--      </div>-->
                <!--    </div>-->
                <!--  </div>-->
                <!--</div>-->
                <!--card stats end-->

                <!--card widgets start-->
                <div id="card-widgets">
                    <div class="row">
                        <div class="col s12 m4 l4">
                            <ul id="task-card" class="collection with-header">
                                <li class="collection-header teal accent-4">
                                    <h4 class="task-card-title">My Task</h4>
                                    <p class="task-card-date">Sept 16, 2017</p>
                                </li>
                                <li class="collection-item dismissable">
                                    <input type="checkbox" id="task1"/>
                                    <label for="task1">Create Mobile App UI.
                                        <a href="#" class="secondary-content">
                                            <span class="ultra-small">Today</span>
                                        </a>
                                    </label>
                                    <span class="task-cat cyan">Mobile App</span>
                                </li>
                                <li class="collection-item dismissable">
                                    <input type="checkbox" id="task2"/>
                                    <label for="task2">Check the new API standerds.
                                        <a href="#" class="secondary-content">
                                            <span class="ultra-small">Monday</span>
                                        </a>
                                    </label>
                                    <span class="task-cat red accent-2">Web API</span>
                                </li>
                                <li class="collection-item dismissable">
                                    <input type="checkbox" id="task3" checked="checked"/>
                                    <label for="task3">Check the new Mockup of ABC.
                                        <a href="#" class="secondary-content">
                                            <span class="ultra-small">Wednesday</span>
                                        </a>
                                    </label>
                                    <span class="task-cat teal accent-4">Mockup</span>
                                </li>
                                <li class="collection-item dismissable">
                                    <input type="checkbox" id="task4" checked="checked" disabled="disabled"/>
                                    <label for="task4">I did it !</label>
                                    <span class="task-cat deep-orange accent-2">Mobile App</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col s12 m12 l4">
                            <div id="flight-card" class="card">
                                <div class="card-header deep-orange accent-2">
                                    <div class="card-title">
                                        <h4 class="flight-card-title">Flight</h4>
                                        <p class="flight-card-date">June 18, Thu 04:50</p>
                                    </div>
                                </div>
                                <div class="card-content-bg white-text">
                                    <div class="card-content">
                                        <div class="row flight-state-wrapper">
                                            <div class="col s5 m5 l5 center-align">
                                                <div class="flight-state">
                                                    <h4 class="margin">LDN</h4>
                                                    <p class="ultra-small">London</p>
                                                </div>
                                            </div>
                                            <div class="col s2 m2 l2 center-align">
                                                <i class="material-icons flight-icon">local_airport</i>
                                            </div>
                                            <div class="col s5 m5 l5 center-align">
                                                <div class="flight-state">
                                                    <h4 class="margin">SFO</h4>
                                                    <p class="ultra-small">San Francisco</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col s6 m6 l6 center-align">
                                                <div class="flight-info">
                                                    <p class="small">
                                                        <span class="grey-text text-lighten-4">Depart:</span> 04.50</p>
                                                    <p class="small">
                                                        <span class="grey-text text-lighten-4">Flight:</span> IB 5786
                                                    </p>
                                                    <p class="small">
                                                        <span class="grey-text text-lighten-4">Terminal:</span> B</p>
                                                </div>
                                            </div>
                                            <div class="col s6 m6 l6 center-align flight-state-two">
                                                <div class="flight-info">
                                                    <p class="small">
                                                        <span class="grey-text text-lighten-4">Arrive:</span> 08.50</p>
                                                    <p class="small">
                                                        <span class="grey-text text-lighten-4">Flight:</span> IB 5786
                                                    </p>
                                                    <p class="small">
                                                        <span class="grey-text text-lighten-4">Terminal:</span> C</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col s12 m4 l4">
                            <div id="profile-card" class="card">
                                <div class="card-image waves-effect waves-block waves-light">
                                    <img class="activator" src="images/gallary/3.png" alt="user bg">
                                </div>
                                <div class="card-content">
                                    <img src="images/avatar/avatar-7.png" alt=""
                                         class="circle responsive-img activator card-profile-image cyan lighten-1 padding-2">
                                    <a class="btn-floating activator btn-move-up waves-effect waves-light red accent-2 z-depth-4 right">
                                        <i class="material-icons">edit</i>
                                    </a>
                                    <span class="card-title activator grey-text text-darken-4">Roger Waters</span>
                                    <p>
                                        <i class="material-icons">perm_identity</i> Project Manager</p>
                                    <p>
                                        <i class="material-icons">perm_phone_msg</i> +1 (612) 222 8989</p>
                                    <p>
                                        <i class="material-icons">email</i> yourmail@domain.com</p>
                                </div>
                                <div class="card-reveal">
                      <span class="card-title grey-text text-darken-4">Roger Waters
                        <i class="material-icons right">close</i>
                      </span>
                                    <p>Here is some more information about this card.</p>
                                    <p>
                                        <i class="material-icons">perm_identity</i> Project Manager</p>
                                    <p>
                                        <i class="material-icons">perm_phone_msg</i> +1 (612) 222 8989</p>
                                    <p>
                                        <i class="material-icons">email</i> yourmail@domain.com</p>
                                    <p>
                                        <i class="material-icons">cake</i> 18th June 1990
                                    </p>
                                    <p>
                                    </p>
                                    <p>
                                        <i class="material-icons">airplanemode_active</i> BAR - AUS
                                    </p>
                                    <p>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--card widgets end-->

                <!--work collections start-->
                <div id="work-collections">
                    <div class="row">
                        <div class="col s12 m12 l6">
                            <ul id="projects-collection" class="collection z-depth-1">
                                <li class="collection-item avatar">
                                    <i class="material-icons cyan circle">card_travel</i>
                                    <h6 class="collection-header m-0">Projects</h6>
                                    <p>Your Favorites</p>
                                </li>
                                <li class="collection-item">
                                    <div class="row">
                                        <div class="col s9">
                                            <p class="collections-title">Web App</p>
                                            <p class="collections-content">AEC Company</p>
                                        </div>
                                        <div class="col s3">
                                            <span class="task-cat cyan">Development</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="collection-item">
                                    <div class="row">
                                        <div class="col s9">
                                            <p class="collections-title">Mobile App for Social</p>
                                            <p class="collections-content">iSocial App</p>
                                        </div>
                                        <div class="col s3">
                                            <span class="task-cat red accent-2">UI/UX</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="collection-item">
                                    <div class="row">
                                        <div class="col s9">
                                            <p class="collections-title">Website</p>
                                            <p class="collections-content">MediTab</p>
                                        </div>
                                        <div class="col s3">
                                            <span class="task-cat teal accent-4">Marketing</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="collection-item">
                                    <div class="row">
                                        <div class="col s9">
                                            <p class="collections-title">AdWord campaign</p>
                                            <p class="collections-content">True Line</p>
                                        </div>
                                        <div class="col s3">
                                            <span class="task-cat deep-orange accent-2">SEO</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col s12 m12 l6">
                            <ul id="issues-collection" class="collection z-depth-1">
                                <li class="collection-item avatar">
                                    <i class="material-icons red accent-2 circle">bug_report</i>
                                    <h6 class="collection-header m-0">Issues</h6>
                                    <p>Assigned to you</p>
                                </li>
                                <li class="collection-item">
                                    <div class="row">
                                        <div class="col s7">
                                            <p class="collections-title">
                                                <strong>#102</strong> Home Page</p>
                                            <p class="collections-content">Web Project</p>
                                        </div>
                                        <div class="col s2">
                                            <span class="task-cat deep-orange accent-2">P1</span>
                                        </div>
                                        <div class="col s3">
                                            <div class="progress">
                                                <div class="determinate" style="width: 70%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="collection-item">
                                    <div class="row">
                                        <div class="col s7">
                                            <p class="collections-title">
                                                <strong>#108</strong> API Fix</p>
                                            <p class="collections-content">API Project </p>
                                        </div>
                                        <div class="col s2">
                                            <span class="task-cat cyan">P2</span>
                                        </div>
                                        <div class="col s3">
                                            <div class="progress">
                                                <div class="determinate" style="width: 40%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="collection-item">
                                    <div class="row">
                                        <div class="col s7">
                                            <p class="collections-title">
                                                <strong>#205</strong> Profile page css</p>
                                            <p class="collections-content">New Project </p>
                                        </div>
                                        <div class="col s2">
                                            <span class="task-cat red accent-2">P3</span>
                                        </div>
                                        <div class="col s3">
                                            <div class="progress">
                                                <div class="determinate" style="width: 95%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="collection-item">
                                    <div class="row">
                                        <div class="col s7">
                                            <p class="collections-title">
                                                <strong>#188</strong> SAP Changes</p>
                                            <p class="collections-content">SAP Project</p>
                                        </div>
                                        <div class="col s2">
                                            <span class="task-cat teal accent-4">P1</span>
                                        </div>
                                        <div class="col s3">
                                            <div class="progress">
                                                <div class="determinate" style="width: 10%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--work collections end-->

                <!-- //////////////////////////////////////////////////////////////////////////// -->
            </div>
            <!--end container-->
        </section>
        <!-- END CONTENT -->
        <!-- START RIGHT SIDEBAR NAV-->
        <aside id="right-sidebar-nav">
            <ul id="chat-out" class="side-nav rightside-navigation">
                <li class="li-hover">
                    <div class="row">
                        <div class="col s12 border-bottom-1 mt-5">
                            <ul class="tabs">
                                <li class="tab col s4">
                                    <a href="#activity" class="active">
                                        <span class="material-icons">graphic_eq</span>
                                    </a>
                                </li>
                                <li class="tab col s4">
                                    <a href="#chatapp">
                                        <span class="material-icons">face</span>
                                    </a>
                                </li>
                                <li class="tab col s4">
                                    <a href="#settings">
                                        <span class="material-icons">settings</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div id="settings" class="col s12">
                            <h6 class="mt-5 mb-3 ml-3">GENERAL SETTINGS</h6>
                            <ul class="collection border-none">
                                <li class="collection-item border-none">
                                    <div class="m-0">
                                        <span class="font-weight-600">Notifications</span>
                                        <div class="switch right">
                                            <label>
                                                <input checked type="checkbox">
                                                <span class="lever"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <p>Use checkboxes when looking for yes or no answers.</p>
                                </li>
                                <li class="collection-item border-none">
                                    <div class="m-0">
                                        <span class="font-weight-600">Show recent activity</span>
                                        <div class="switch right">
                                            <label>
                                                <input checked type="checkbox">
                                                <span class="lever"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <p>The for attribute is necessary to bind our custom checkbox with the input.</p>
                                </li>
                                <li class="collection-item border-none">
                                    <div class="m-0">
                                        <span class="font-weight-600">Notifications</span>
                                        <div class="switch right">
                                            <label>
                                                <input type="checkbox">
                                                <span class="lever"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <p>Use checkboxes when looking for yes or no answers.</p>
                                </li>
                                <li class="collection-item border-none">
                                    <div class="m-0">
                                        <span class="font-weight-600">Show recent activity</span>
                                        <div class="switch right">
                                            <label>
                                                <input type="checkbox">
                                                <span class="lever"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <p>The for attribute is necessary to bind our custom checkbox with the input.</p>
                                </li>
                                <li class="collection-item border-none">
                                    <div class="m-0">
                                        <span class="font-weight-600">Show your emails</span>
                                        <div class="switch right">
                                            <label>
                                                <input type="checkbox">
                                                <span class="lever"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <p>Use checkboxes when looking for yes or no answers.</p>
                                </li>
                                <li class="collection-item border-none">
                                    <div class="m-0">
                                        <span class="font-weight-600">Show Task statistics</span>
                                        <div class="switch right">
                                            <label>
                                                <input type="checkbox">
                                                <span class="lever"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <p>The for attribute is necessary to bind our custom checkbox with the input.</p>
                                </li>
                            </ul>
                        </div>
                        <div id="chatapp" class="col s12">
                            <div class="collection border-none">
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-1.png" alt="" class="circle cyan">
                                    <span class="line-height-0">Elizabeth Elliott </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">5.00 AM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Thank you </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-2.png" alt="" class="circle deep-orange accent-2">
                                    <span class="line-height-0">Mary Adams </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">4.14 AM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Hello Boo </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-3.png" alt="" class="circle teal accent-4">
                                    <span class="line-height-0">Caleb Richards </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">9.00 PM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Keny ! </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-4.png" alt="" class="circle cyan">
                                    <span class="line-height-0">June Lane </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">4.14 AM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Ohh God </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-5.png" alt="" class="circle red accent-2">
                                    <span class="line-height-0">Edward Fletcher </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">5.15 PM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Love you </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-6.png" alt="" class="circle deep-orange accent-2">
                                    <span class="line-height-0">Crystal Bates </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">8.00 AM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Can we </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-7.png" alt="" class="circle cyan">
                                    <span class="line-height-0">Nathan Watts </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">9.53 PM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Great! </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-8.png" alt="" class="circle red accent-2">
                                    <span class="line-height-0">Willard Wood </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">4.20 AM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Do it </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-9.png" alt="" class="circle teal accent-4">
                                    <span class="line-height-0">Ronnie Ellis </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">5.30 PM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Got that </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-1.png" alt="" class="circle cyan">
                                    <span class="line-height-0">Gwendolyn Wood </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">4.34 AM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Like you </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-2.png" alt="" class="circle red accent-2">
                                    <span class="line-height-0">Daniel Russell </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">12.00 AM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Thank you </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-3.png" alt="" class="circle teal accent-4">
                                    <span class="line-height-0">Sarah Graves </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">11.14 PM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Okay you </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-4.png" alt="" class="circle red accent-2">
                                    <span class="line-height-0">Andrew Hoffman </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">7.30 PM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Can do </p>
                                </a>
                                <a href="#!" class="collection-item avatar border-none">
                                    <img src="images/avatar/avatar-5.png" alt="" class="circle cyan">
                                    <span class="line-height-0">Camila Lynch </span>
                                    <span class="medium-small right blue-grey-text text-lighten-3">2.00 PM</span>
                                    <p class="medium-small blue-grey-text text-lighten-3">Leave it </p>
                                </a>
                            </div>
                        </div>
                        <div id="activity" class="col s12">
                            <h6 class="mt-5 mb-3 ml-3">RECENT ACTIVITY</h6>
                            <div class="activity">
                                <div class="col s3 mt-2 center-align recent-activity-list-icon">
                                    <i class="material-icons white-text icon-bg-color deep-purple lighten-2">add_shopping_cart</i>
                                </div>
                                <div class="col s9 recent-activity-list-text">
                                    <a href="#" class="deep-purple-text medium-small">just now</a>
                                    <p class="mt-0 mb-2 fixed-line-height font-weight-300 medium-small">Jim Doe
                                        Purchased new equipments for zonal office.</p>
                                </div>
                                <div class="recent-activity-list chat-out-list row mb-0">
                                    <div class="col s3 mt-2 center-align recent-activity-list-icon">
                                        <i class="material-icons white-text icon-bg-color cyan lighten-2">airplanemode_active</i>
                                    </div>
                                    <div class="col s9 recent-activity-list-text">
                                        <a href="#" class="cyan-text medium-small">Yesterday</a>
                                        <p class="mt-0 mb-2 fixed-line-height font-weight-300 medium-small">Your Next
                                            flight for USA will be on 15th August 2015.</p>
                                    </div>
                                </div>
                                <div class="recent-activity-list chat-out-list row mb-0">
                                    <div class="col s3 mt-2 center-align recent-activity-list-icon medium-small">
                                        <i class="material-icons white-text icon-bg-color green lighten-2">settings_voice</i>
                                    </div>
                                    <div class="col s9 recent-activity-list-text">
                                        <a href="#" class="green-text medium-small">5 Days Ago</a>
                                        <p class="mt-0 mb-2 fixed-line-height font-weight-300 medium-small">Natalya
                                            Parker Send you a voice mail for next conference.</p>
                                    </div>
                                </div>
                                <div class="recent-activity-list chat-out-list row mb-0">
                                    <div class="col s3 mt-2 center-align recent-activity-list-icon">
                                        <i class="material-icons white-text icon-bg-color amber lighten-2">store</i>
                                    </div>
                                    <div class="col s9 recent-activity-list-text">
                                        <a href="#" class="amber-text medium-small">1 Week Ago</a>
                                        <p class="mt-0 mb-2 fixed-line-height font-weight-300 medium-small">Jessy Jay
                                            open a new store at S.G Road.</p>
                                    </div>
                                </div>
                                <div class="recent-activity-list row">
                                    <div class="col s3 mt-2 center-align recent-activity-list-icon">
                                        <i class="material-icons white-text icon-bg-color deep-orange lighten-2">settings_voice</i>
                                    </div>
                                    <div class="col s9 recent-activity-list-text">
                                        <a href="#" class="deep-orange-text medium-small">2 Week Ago</a>
                                        <p class="mt-0 mb-2 fixed-line-height font-weight-300 medium-small">voice mail
                                            for conference.</p>
                                    </div>
                                </div>
                                <div class="recent-activity-list chat-out-list row mb-0">
                                    <div class="col s3 mt-2 center-align recent-activity-list-icon medium-small">
                                        <i class="material-icons white-text icon-bg-color brown lighten-2">settings_voice</i>
                                    </div>
                                    <div class="col s9 recent-activity-list-text">
                                        <a href="#" class="brown-text medium-small">1 Month Ago</a>
                                        <p class="mt-0 mb-2 fixed-line-height font-weight-300 medium-small">Natalya
                                            Parker Send you a voice mail for next conference.</p>
                                    </div>
                                </div>
                                <div class="recent-activity-list chat-out-list row mb-0">
                                    <div class="col s3 mt-2 center-align recent-activity-list-icon">
                                        <i class="material-icons white-text icon-bg-color deep-purple lighten-2">store</i>
                                    </div>
                                    <div class="col s9 recent-activity-list-text">
                                        <a href="#" class="deep-purple-text medium-small">3 Month Ago</a>
                                        <p class="mt-0 mb-2 fixed-line-height font-weight-300 medium-small">Jessy Jay
                                            open a new store at S.G Road.</p>
                                    </div>
                                </div>
                                <div class="recent-activity-list row">
                                    <div class="col s3 mt-2 center-align recent-activity-list-icon">
                                        <i class="material-icons white-text icon-bg-color grey lighten-2">settings_voice</i>
                                    </div>
                                    <div class="col s9 recent-activity-list-text">
                                        <a href="#" class="grey-text medium-small">1 Year Ago</a>
                                        <p class="mt-0 mb-2 fixed-line-height font-weight-300 medium-small">voice mail
                                            for conference.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </aside>
        <!-- END RIGHT SIDEBAR NAV-->
    </div>
    <!-- END WRAPPER -->
</div>
<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<footer class="page-footer gradient-45deg-light-blue-cyan">
    <div class="footer-copyright">
        <div class="container">
            <span>Copyright ©
              <script type="text/javascript">
                document.write(new Date().getFullYear());
              </script> <a class="grey-text text-lighten-2"
                           href="http://themeforest.net/user/pixinvent/portfolio?ref=pixinvent" target="_blank">PIXINVENT</a> All rights reserved.</span>
            <span class="right hide-on-small-only"> Design and Developed by <a class="grey-text text-lighten-2"
                                                                               href="https://pixinvent.com/">PIXINVENT</a></span>
        </div>
    </div>
</footer>
<!-- END FOOTER -->
<!-- ================================================
Scripts
================================================ -->
<!-- jQuery Library -->
<script type="text/javascript" src="vendors/jquery-3.2.1.min.js"></script>
<!--materialize js-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--scrollbar-->
<script type="text/javascript" src="vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="js/plugins.js"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="js/custom-script.js"></script>
</body>
</html>